<script setup lang="ts">
import {useRoute} from "vue-router";

const $route = useRoute();

</script>

<template>
  <!--这个router-view是放在另一个router-view里面的，所以这是二级路由-->
  <router-view v-slot="{ Component }">
    <transition name="slide" mode="out-in">
      <div class="component">
        <keep-alive>
          <component :is="Component" :key="$route.path"/>
        </keep-alive>
      </div>
    </transition>
  </router-view>
</template>

<style scoped>
.component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.4s ease;
}
.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
.slide-enter-to, .slide-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>